<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" placeholder="请输入id">
    <button>查看</button>


    <script>
        // 如何详情页 知道列表点击是哪一个数据
        // 只能在列表页  点击时拿到id 在跳转页面时   传给详情页
        // Id 通过ajax 发送给后端 后端拿到这个id 就去查询 这个id  里面的内容  然后返回给你  咱们渲染到页面
        let inp = document.querySelector("input")
        let btn = document.querySelector("button")
        btn.onclick = function () {
            let a = inp.value
            let b = location.href
            //  window.open("./65页面接收.html?id="+a,"_self")
            //  将id存在浏览器上
            //* localStorage   5mb(不同版本不同浏览器 可能不一样)
            //  永久存储  除非手动删除或者清空磁盘 才会销毁 同时还能在不同页面共享(同源下)
            //* sessionStorage   5mb(不同版本不同浏览器 可能不一样)
            //  临时存储  页面关闭 数据销毁 并且不能多个页面共享
            //* cookie   4kb
            //  可以设置过期时间  时间到了 再销毁
            // localStorage.getItem("想要获取值的名字")//从浏览器上  获取某个值
            // localStorage.setItem("名字","值")//设置新增
            // localStorage.removeItem("想要删除值 的名字")//删除某一个
            // localStorage.clear()//清空所有

            localStorage.setItem("myId",a)

            window.open("./65页面接收.html", "_self")
            
        }


    </script>
</body>

</html>